<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

			li {
				list-style-type:none;
				width: 40px;
				height: 40px;
				margin-top: 20px;
				background-color: #2C8DFB;
				position: relative;
			}
			
			
			.checkbox:before {  
				       position: absolute;
					   top: 0;
					   left: 0;
				       width: 31px;
				       height: 31px;
				       content: "";  
				       display: block; 
					   background-color: #fff;
		               background-size: 126px 118px;
				       background-image: url(img/sprite.img_default_437_9dfdf506.png) ;
					   background-position: -31px 0;
				}   
				.checkboxed:before {
					       position: absolute;
						   top: 0;
						   left: 0;
					       width: 31px;
					       height: 31px;
					       content: "";  
					       display: block; 
				           background-size: 126px 118px;
						   background-color: #fff;
					       background-image: url(img/sprite.img_default_437_9dfdf506.png) ;
						   background-position: 0 -31px;
					}   
		</style>
	</head>
	<body>
		<ul>
			<li><i class="checkbox checkboxname" id="checkbox" onclick="check(event)"></i></li>
			<li><i class="checkbox"></i></li>
			<li><i class="checkbox"></i></li>
		</ul>
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  function check(event){
	  console.log(1)
	  var checkdom = event.target;
	  console.log(checkdom)
	 $("checkboxname").removeClass('checkbox').addClass('checkboxed');
  }
</script>
